<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<div th:replace="header::common_resource"></div>
</head>
<body>
	<div class="layui-btn-group demoTable">
		<button id="insert" class="layui-btn">添加</button>
		<button id="deleteAll" class="layui-btn">批量删除</button>
		<button class="layui-btn">验证是否全选</button>
	</div>
	<table class="layui-hide" id="test" lay-filter="tableFilter"></table>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	</script>

	<!-- d:代表当前这一行的对象 -->
	<script type="text/html" id="statusTpl">
		{{#	  if(d.status == 1) {   		}}
		在售
		{{#	  } else if(d.status == 2){   	}}
		下架
		{{#	  } else if(d.status == 3) {	}}
		删除
		{{#	  }								}}
	</script>

	<script type="text/html" id="mainImageTpl">
		<img src="{{d.mainImageFullUrl}}"></img>
	</script>

	<script type="text/javascript">
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem: '#test'
				,url:'[[@{/product/selectByPage}]]'
				,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,cols: [
					[
						{checkbox: true, fixed: true}
						,{field:'id', title: 'ID'}
						,{field:'name', title: '商品名'}
						,{field:'subtitle', title: '子标题'}
						,{field:'mainImage',title: '主图', templet:'#mainImageTpl'}
						,{field:'price', title: '价格'}
						,{field:'stock', title: '库存'}
						,{field:'status', title: '状态', templet:'#statusTpl'}
						,{field:'createTime', title: '创建时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd'):'未知'}}</div>"}
						,{field:'updateTime', title: '更新时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd'):'未知'}}</div>"}
						,{toolbar: '#barDemo', width:120, fixed: 'right'}
					]
				]
				,page: true
				,id:'tableRelaod'
			});

			//监听工具条
			table.on('tool(tableFilter)', function(obj){
				// data是这一行的数据
				// {id: 17, name: "er", password: "123", age: 3, email: "3", …}
				var data = obj.data;
				console.log(obj);
				console.log(obj.data);
				if(obj.event === 'del'){
					layer.confirm('真的删除行么', {icon:3}, function(index){
						$.post(
								'[[@{/product/deleteById}]]',
								{'id':data.id},
								function(jsonResult) {
									if(jsonResult.ok) {
										// mylayer.okMsg(jsonResult.msg);
										layer.msg(
												jsonResult.msg,
												{icon : 1, time : 2000},
												function() {// msg消失之后触发的函数
													// 重新加载表格
													table.reload('tableRelaod');
												}
										);
									} else {
										mylayer.errorMsg(jsonResult.msg);
									}
								},
								'json'
						);
					});
				} else if(obj.event === 'edit'){
				}
			});

			$('#insert').on('click', function() {
				console.log('insert');
				// location.href='${path}/product_insert.jsp';
				layer.open({
					type : 2,
					area : ['800px', '500px'],
					content : '[[@{/product/getProductInsertPage}]]'
				});
			});

			$('#deleteAll').on('click', function() {
				console.log('deleteAll');
				var checkStatus = table.checkStatus('tableRelaod')
				var data = checkStatus.data;
				console.log(data);
				// [{id: 1, name: "zh3", password: "123"},{id:2,...}]
				// "1,2"
				var ids = new Array(); // [1,2]
				$(data).each(function() {
					ids.push(this.id);
				});
				var idsStr = ids.join(',');// "1,2"
				console.log(idsStr);

				$.post(
						'[[@{/product/deleteAll}]]',
						{'ids':idsStr},
						function(jsonResult) {
							if(jsonResult.ok) {
								// mylayer.okMsg(jsonResult.msg);
								layer.msg(
										jsonResult.msg,
										{icon : 1, time : 2000},
										function() {// msg消失之后触发的函数
											// 重新加载表格
											table.reload('tableRelaod');
										}
								);
							} else {
								mylayer.errorMsg(jsonResult.msg);
							}
						},
						'json'
				);

			});
		});
	</script>
</body>
</html>